<%@ page import="com.Dao.PersonalMessDao" %>
<%@ page import="org.springframework.beans.factory.annotation.Autowired" %>
<%@ page import="com.pojo.PersonalIndex" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Collections" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人主页</title>
    <link rel="stylesheet" href="/css/Dou.css">
    <link rel="stylesheet" href="/css/sousuo.css">
    <link rel="stylesheet" href="/css/page.css">
    <link rel="stylesheet" href="/css/personal.css">
    <script src="/js/jquery-3.6.0.js"></script>
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
    <style>
        body {
            background: #f8f9f9;
            color: #333;
        }

        .list-item-image a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 100
        }

        .active {
            background-color: #389eac;
            color: #fff;
        }

        .hidden {
            display: none;
        }

        input:focus {
            border: 1px solid #389eac;
        }

        input[type="file"] {
            display: none;
        }
        a{
            cursor: pointer;
        }
        #remarkList li{
            margin-top: 2px;
            border-bottom: 1px solid #ddd;
        }
        #header-compact-v3 .nav-user{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 50px;
            margin-right: -20px;
        }
        #header-compact-v3 .header-inner a:not([class^=btn]){
            color:#333;
        }
        #header-compact-v3 .nav-user .avatar{
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .header-inner a{
            cursor: pointer;
        }
        .avatar{
            position: relative;
        }
        a.avatar::after{
            position:absolute;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            border-radius: 100px;
            background: #000;
            content: '';
            opacity: 0;
            transition: opacity .1s ease-in;
        }
        #header-compact-v3 .nav-user .avatar img{
            width: 100%;
            vertical-align: top;
            object-fit: cover;
        }
        .avatar img{
            display: block;
            width: 100%;
            border-radius: 100px;
        }
        img{
            border: none;
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
        }
        #header-compact-v3 .more-active:hover .drop-down-list{
            display: block;
        }
        #header-compact-v3 .nav-user .drop-down-list{
            top:50px;
        }
        .drop-down-list{
            position:absolute;
            right: 0;
            z-index: 200;
            padding: 10px 0;
            min-width: 120px;
            max-width: 130px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            text-align: left;
            display: none;
        }
        .drop-down-list::before{
            position: absolute;
            margin-top: -22px;
            width: 100%;
            height: 12px;
            content: '';
        }
        #header-compact-v3 .more-active .drop-down-list a{
            color: #333;
        }
        .header-inner{
            cursor: pointer;
        }
        .drop-down-list a{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 9px;
            white-space: nowrap;
            line-height: 25px;
        }
        .drop-down-list a:hover {
            background-color: #abcdef;
        }
    </style>
</head>

<body>
<%
    String username = (String) request.getSession().getAttribute("username");//从session中获取当前用户的登陆信息
%>
<div id="header-container">
    <header id="header-compact-v3" class="pre-rendered-header should-stick">
        <div class="header-inner">
            <a href="#" title="豆瓣阅读" class="site-logo"></a>
            <nav class="func-nav">
                <ul>
                    <li>
                        <button title="分类" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7">
                                <path fill="#a6a6a6"
                                      d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"></path>
                            </svg><span class="text">分类</span>
                        </button>
                    </li>
                    <li>
                        <button id="btn" onclick="toggle()" title="搜索" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 14 14">
                                <path fill="#a6a6a6" `
                                      d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"></path>
                            </svg><span class="text">搜索</span>
                        </button>
                    </li>
                </ul>

                <div class="sousuo" id="content" style="display:none;">

                    <form action="#" class="search-form">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                             class="search-icon">
                            <circle cx="8.486" cy="8.486" r="7.736" stroke="#35393C" stroke-width="1.8">

                            </circle>
                            <path fill="#fff" stroke-width="1.2" stroke="#35393C"
                                  d="M4.603 4.603a5.491 5.491 0 000 7.765"></path>
                            <path fill="#A6A6A6" stroke-width="1.2" stroke="#35393C"
                                  d="M13.685 14.39l.705-.705 2.55 2.55a.498.498 0 01-.704.706l-2.55-2.55z"></path>
                        </svg>


                        <input type="text" name="q" maxlength="60" autocomplete="off"
                               placeholder="原创作品 / 同人文 / 电子书 / 作者 / 译者 / 出版社">

                        <button class="btn-search" type="submit">搜索</button>
                    </form>

                    <!-- 热搜 和历史记录 -->

                    <div class="re">
                        <div class="lis">
                            <div>
                                <div>
                                    搜索历史 <span>清除</span>
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k strs">
                                        <strong> 吊桥效应</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lis">
                            <div>
                                <div>
                                    热门搜索
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k">
                                        <strong class="iii"> 食得咸鱼低得喝</strong>
                                        <strong class="kkk"> 在傍晚回家</strong>
                                    </div>
                                    <div class="k stt">
                                        <strong class="kk"> 大城小爱</strong>
                                        <strong class="sttt"> 多雨之地</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 白日谎言</strong>
                                        <strong> 日偏食</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lis">
                            <div>
                                <div>
                                    为你推荐
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k strs">
                                        <strong> 6部热门原创小说现时半价</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 2022 年度榜单</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 第五届长篇拉力赛获奖名单公布</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- 头部中间部分 -->
            <div class="site-nav-container">
                <nav class="site-nav site-nav-normal" id="myElement">
                    <ul class="nav-list">
                        <li class="nav-item-original">
                            <a href="#">原创</a>
                        </li>

                        <li class="nav-item-chart">
                            <a href="#">排行</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">出版</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">会员</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">APP</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div id="nav-submit" class="nav-submit">
                <a href="#" class="lnk-start-publish fill-current-color">成为作者</a>
            </div>

            <nav class="site-nav-right">
                <ul>
                    <li class="nav-bookshelf">
                        <a href="#" title="书架" aria-label="书架" class="require-login">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24"
                                 class="fill-current-color">
                                <path fill="#a6a6a6"
                                      d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"></path>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 第四部分 -->
            <div class="user-info" id="user-info">
                <div class="login-buttons">
                    <a href="#" data-size="sx" class="btn-contained login">
                        <span class="text">登录 / 注册</span>
                    </a>
                </div>
            </div>
        </div>
    </header>
</div>
<div class="main" style="margin-top: 80px;">
    <div class="people-section-wrapper" style="margin-left: 120px">
        <div class="people-section col-media">
            <c:forEach var="person" items="${personalMessage}">
            <div class="people-meta col-media cm-body">
                <div class="cm-left">
                    <a href="#" class="lnk-avatar">
                        <div class="avatar avatar48">
                            <div class="inner">
                                <img src="${person.getUserAvatar()}"
                                     alt="" style="width: 48px;height:48px" id="avatarImg" onclick="handleImageUpload()"
                                     >
                                <input type="file" id="fileInput" onchange="displayImage(event)">
                            </div>
                        </div>
                    </a>
                </div>
                <div class="cm-body">
                    <div class="hd">
                        <div class="people-name" onclick="startEditing(this)">
                            <span id="nickname">${person.getNickname()}</span>
                            <input id="nameInput" type="text" class="hidden" onblur="finishEditing()">
                            <span>&nbsp;</span>
                            <img src="/images/bianji.png" alt="" id="hid" style="width: 30px;height:30px;cursor:pointer"
                                 onclick="startEditing(this.parentNode)">
                        </div>
                    </div>
                    <div class="bd">
                        <span class="joind-time" style="font-size: 12px;">${person.getRegistTime()}加入</span>
                    </div>
                </div>
                <div class="special-icons"></div>
            </div>
            </c:forEach>
        </div>
    </div>
    <div class="content-section" style="width: 1200px;">
        <div class="aside col col4" style="margin-right: 135px">
            <section class="standbyme-entrance">
                <div class="hd lined">
                    <h3>我的阅读报告</h3>
                </div>
                <div class="bd">
                    <ul class="standbyme-list">
                        <li>
                            <a href="#" class="standbyme-item">2023</a>
                        </li>
                        <li>
                            <a href="#" class="standbyme-item">2022</a>
                        </li>
                        <li>
                            <a href="#" class="standbyme-item">2021</a>
                        </li>
                        <li>
                            <a href="#" class="standbyme-item">2020</a>
                        </li>
                        <li>
                            <a href="#" class="standbyme-item">2019</a>
                        </li>
                        <li>
                            <a href="#" class="standbyme-item">2018</a>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="share-buttons-section">
                <span class="label">分享到：</span>
                <span class="share-buttons icon-normal">
						<a href="#" class="rec-douban-dislog">分享到豆瓣</a>
						<a href="#" class="rec-weibo">分享到微博</a>
					</span>
            </section>
        </div>
        <div class="article col col9" style="margin-left: 120px">
            <section class="review-list-widget">
                <div class="hd lined">
                    <h3>
                        我的评论
                        <span class="total-number" id="number">1</span>
                    </h3>
                </div>
                <div class="bd">
                    <ul class="list-lined" id="remarkList">
                        <li class="review-item collapsed  col-media">
                            <div class="info">
                                <div itemprop="description" class="desc" style="margin-top: 0;">
                                    <span style="color: #999;">推荐票</span><img src="/images/piao.png" alt=""
                                                                                 style="width: 30px;height:30px"><span>&nbsp;&nbsp;</span><span>0</span>
                                </div>
                                <div itemprop="description" class="desc">
                                    我很喜欢！！
                                </div>
                                <div class="ft">
										<span class="target-works">
											评论至
											<a href="#">
												<span class="left-double-angle-bracket">《</span>
												<span>多雨之地</span>
												<span class="right-double-angle-bracket">》</span>
											</a>
										</span>
                                    <span class="counts-field">
											<span class="comments-num">
												<span id="reply">0</span>回应
											</span>
											<span class="voted-num">
												<span id="vote">0</span>赞
											</span>
										</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</div>
<div style="text-align: center;margin:50px auto;">
    <div id="pager" class="pager clearfix">
    </div>
</div>
<div class="footer">
    <div class="footer-content">
        <div class="footer-item">
            <a href="##">联系我们</a>
        </div>
        <div class="footer-item">
            <a href="##">帮助中心</a>
        </div>
        <div class="footer-item">
            <a href="##">官方微博</a>
        </div>
        <div class="footer-item">
            <a href="##">移动客户端</a>
        </div>
        <div class="footer-item">
            <a href="##">来这里工作</a>
        </div>
    </div>
    <div class="copyright">
        <a href="##"></a>
    </div>
</div>
</body>
<script src="/js/jquery.z-pager.js"></script>
<script src="/js/personalIndex.js"></script>
<script src="https://unpkg.com/coco-message/coco-message.min.js" defer></script>
<script>
    $(document).ready(function (){
        let username='<%=username%>';
        let remarkNum=document.getElementById('number');
        $.ajax({
            type:"GET",
            url:"/myIndex/myRemark",
            data:{username:username},
            success:function (data){
                $('#remarkList').empty();
                remarkNum.innerText=data.length;
                for(var i=0;i<data.length;i++){
                    $('#remarkList').append(`<li class="review-item collapsed  col-media">
                            <div class="info">
                                <div itemprop="description" class="desc" style="margin-top: 0;">
                                    <span style="color: #999;">推荐票</span><img src="/images/piao.png" alt=""
                                                                                 style="width: 30px;height:30px"><span>&nbsp;&nbsp;</span><span>`+data[i].recommendQuantity+`</span>
                                </div>
                                <div itemprop="description" class="desc">`+
                                 data[i].comment+`
                                </div>
                                <div class="ft">
										<span class="target-works">
											评论至
											<a href="/find/findBookDetail?bookId=`+data[i].bookId+`">
												<span class="left-double-angle-bracket">《</span>
												<span>`+data[i].bookName+`</span>
												<span class="right-double-angle-bracket">》</span>
											</a>
										</span>
                                    <span class="counts-field">
											<span class="comments-num">
												<span id="reply">`+data[i].reply+`</span>回应
											</span>
											<span class="voted-num">
												<span id="vote">`+data[i].praise+`</span>赞
											</span>
										</span>
                                </div>
                            </div>
                        </li>`)
                }
            }
        })
    })
    //修改昵称,失去焦点时触发
    function finishEditing() {
        // 获取span和input元素
        let username='<%=username%>';
        let span=document.getElementById('nickname');
        let input = document.getElementById('nameInput');
        let img = document.getElementById('hid');
        let oldNickName=span.innerText;
        // 隐藏input，显示span
        input.classList.add('hidden');
        span.classList.remove('hidden');
        img.classList.remove('hidden');
        // 设置span的文本为input的值
        if(input.value===''||input.value===oldNickName){
            span.innerText=oldNickName;
        }
        else{
            span.innerText = input.value;
            $.ajax({
                type:"POST",
                url:"/myIndex/newNickName",
                data:{username:username,newNickName:input.value},
                success:function (){
                    cocoMessage.success('修改成功',2000);
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    }
    function handleImageUpload() {
        // 触发文件上传input点击事件
        document.getElementById('fileInput').click();
    }

    function displayImage(event) {
        // 处理选定的文件并显示图像
        const fileInput = event.target;
        const avatarImg = document.getElementById('avatarImg');
        const file = fileInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                // 在img元素中显示所选图像
                avatarImg.src = e.target.result;
            };
            reader.readAsDataURL(file);
            console.log(file);
            storageImage(file);
        }
    }
    function storageImage(file){
        let headImage=file.name;
        let username='<%=username%>';
        console.log(name);
        $.ajax({
            type:"POST",
            url:"/load/updateImage",
            data:{username:username,headImage:headImage},
            success:function (){
                cocoMessage.success('更换成功');
            },
            error:function (error){
                console.log(error);
            }
        })
    }
    $(document).ready(function (){
        let username='<%=username%>';
        console.log(username);
        if (username==='null') {//当前尚未登录
            console.log('success2');
            $('#user-info').empty();
            $('#user-info').append('<div class="login-buttons">'+'<a href="userLogin.jsp" data-size="sx" class="btn-contained login">'+
                '<span class="text">登录 / 注册</span></a> </div>')
        }else{//已经登陆.带着登陆信息到后端加载用户头像
            console.log('success1');
            $.ajax({
                type:"GET",
                url:"/load/Image",
                data:{username:username},
                success:function (data) {
                    $('#user-info').empty();
                    for(var i=0;i<data.length;i++) {
                        $('#user-info').append('<div class="nav-user more-active">' +
                            '<a href="#" class="avatar">' +
                            '<img src="'+data[i].userAvatar+'" alt="">'+
                            '</a>' +
                            '<div class="drop-down-list">' +
                            '<a href="/myIndex/message?username='+username+'">' +
                            '<span class="text">个人主页</span>' +
                            '</a>' +
                            '<a href="#">' +
                            '<span class="text">退出登陆</span>' +
                            '</a>' +
                            '</div>' +
                            '</div>')
                    }
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    })
</script>

</html>